<template>
  <inline-modal :title="$ct('detail','详情')" :visible="visible"
                @cancel="() => { $emit('cancel') }" :showOk="false">
    <div class="main">
      <a-spin :spinning="loading">
        <a-form :form="form">
          <a-row>
            <a-col span="12">
              <a-form-item label="请求工号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input  v-decorator="['userNameId']" readOnly/>
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['userName']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求IP" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationIp']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationDesc']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求设备" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationUserAgent']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求URL" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationUrl']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求方法名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationMethodName']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationMethod']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求参数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationRequestArgs']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求耗时" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationTime']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="24">
              <a-form-item label="操作响应记录" :labelCol="{
                 xs: {
                  span: 24,
                },
                sm: {
                  span: 2,
                },
                }" :wrapperCol="{
                xs: {
                  span: 24,
                },
                sm: {
                  span: 22,
                },
              }">
                <a-textarea :style="{color: type == 'errorLog'? 'red' : 'unset'}" readOnly v-decorator="['operationContent']" :auto-size="true"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </div>
  </inline-modal>
</template>

<script>
import pick from "lodash.pick";
import ARow from "ant-design-vue/es/grid/Row";

const fields = ['userNameId', 'userName', 'operationIp', 'operationDesc','operationContent', 'operationUserAgent', 'operationUrl', 'operationMethodName', 'operationMethod', 'operationRequestArgs', 'operationTime', 'operationResponeArgs']
// 表单字段
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: () => null
    },
    type:''
  },
  components: {
    ARow
    // TDictSelectTag, TMultiSelectTag
  },
  data() {
    return {
      title: "",
      loading: false,
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 4,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 20,
        },
      },
      form: this.$form.createForm(this),
    }
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.$nextTick(() => {
        this.model && this.form.setFieldsValue(pick(this.model, fields));
      })
    });
  },
  methods: {
    add(m, data) {
      console.log(m, data)
    },
    edit(m, data) {
      console.log(m, data)
    }
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-descriptions-bordered .ant-descriptions-item-label {
  white-space: nowrap;
}

.ant-descriptions {
  user-select: text;
}
</style>
